<template>
  <div class="box">
    <div class="card" v-for="item in userList" :key="item.id">
      <div class="card-photo"></div>
      <div class="card-title">
        {{ item.name }} <br />
        <span>{{ item.next }}</span>
      </div>
      <div class="card-socials">
        <button class="card-socials-btn facebook">
          <svg
            class="icon"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            viewBox="0 0 24 24"
            id="Layer_21"
            height="24"
            data-name="Layer 21"
          >
            <title></title>
            <path
              d="M16.75,9H13.5V7a1,1,0,0,1,1-1h2V3H14a4,4,0,0,0-4,4V9H8v3h2v9h3.5V12H16Z"
            ></path>
          </svg>
        </button>
        <button class="card-socials-btn github" @click="github(item.github)">
          <svg
            viewBox="0 0 24 24"
            height="33"
            width="33"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
            ></path>
          </svg>
        </button>
        <button class="card-socials-btn linkedin">
          <svg
            height="512"
            viewBox="0 0 512 512"
            width="512"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m51.326 185.85h90.011v270.872h-90.011zm45.608-130.572c-30.807 0-50.934 20.225-50.934 46.771 0 26 19.538 46.813 49.756 46.813h.574c31.396 0 50.948-20.814 50.948-46.813-.589-26.546-19.551-46.771-50.344-46.771zm265.405 124.209c-47.779 0-69.184 26.28-81.125 44.71v-38.347h-90.038c1.192 25.411 0 270.872 0 270.872h90.038v-151.274c0-8.102.589-16.174 2.958-21.978 6.519-16.174 21.333-32.923 46.182-32.923 32.602 0 45.622 24.851 45.622 61.248v144.926h90.024v-155.323c0-83.199-44.402-121.911-103.661-121.911z"
            ></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

let userList = ref([

  {
    id: 1,
    img: "http://www.w3.org/2000/svg",
    name: "解修谱",
    next: "前端开发",
    github: "https://gitee.com/yu-lang666",
  },
  
]);
const github = (url) => {
   window.open(url, '_blank')
};
</script>
<style scoped lang="scss">
.box {
  display: flex;
  flex-wrap: wrap;
  .card {
    --font-color: #323232;
    --font-color-sub: #666;
    --bg-color: #fff;
    --main-color: #323232da;
    width: 200px;
    height: 254px;
    background: var(--bg-color);
    border: 2px solid var(--main-color);
    box-shadow: 4px 4px var(--main-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 15px;
  }

  .card-photo {
    /* clear and add new css */
    transform: scale(0.3) translate(220px, 230px);
    width: 250px;
    height: 250px;
    margin-left: -125px;
    margin-top: -125px;
    background: radial-gradient(
          circle,
          rgba(0, 0, 0, 0.15) 50%,
          rgba(0, 0, 0, 0) 50.8%
        )
        14% 30%/11% 11%,
      radial-gradient(circle, #ffdab9 50%, rgba(255, 218, 185, 0) 50.8%) 10% 30%/16%
        16%,
      radial-gradient(circle, #8b4513 50%, rgba(139, 69, 19, 0) 50.8%) 7.5% 29%/20%
        20%,
      radial-gradient(circle, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 50.8%)
        86% 30%/11% 11%,
      radial-gradient(circle, #ffdab9 50%, rgba(255, 218, 185, 0) 50.8%) 90% 30%/16%
        16%,
      radial-gradient(circle, #8b4513 50%, rgba(139, 69, 19, 0) 50.8%) 92.5% 29%/20%
        20%,
      radial-gradient(
          circle at 50% 0,
          #ffdab9 29.5%,
          #8b4513 30%,
          #8b4513 35%,
          rgba(19, 139, 59, 0) 35.5%
        )
        50% 95%/40% 20%,
      radial-gradient(
          ellipse at 50% 100%,
          rgba(139, 69, 19, 0) 49%,
          #8b4513 49.5%,
          #8b4513 52%,
          rgba(139, 69, 19, 0) 52.5%
        )
        50% 110%/120% 40%,
      radial-gradient(
          circle at 50% 0,
          rgba(255, 255, 255, 0) 35%,
          white 35%,
          white 45%,
          rgba(255, 255, 255, 0) 45.5%
        )
        50% 89%/40% 13%,
      linear-gradient(#8b4513, #8b4513) 37% 100%/0.25em 22%,
      linear-gradient(#8b4513, #8b4513) 63% 100%/0.25em 22%,
      linear-gradient(80deg, rgba(0, 0, 0, 0) 50%, #333 50.5%) 24% 100%/1em 18%,
      linear-gradient(-80deg, rgba(0, 0, 0, 0) 50%, #333 50.5%) 76% 100%/1em 18%,
      linear-gradient(162deg, rgba(0, 0, 0, 0) 10%, #333 10%) 30% 100%/1.5em 21%,
      linear-gradient(-162deg, rgba(0, 0, 0, 0) 10%, #333 10%) 70% 100%/1.5em
        21%,
      radial-gradient(
          ellipse at 100% 100%,
          #556b2f 50%,
          rgba(85, 107, 47, 0) 50.5%
        )
        0 100%/37% 29%,
      radial-gradient(
          ellipse at 0 100%,
          #556b2f 50%,
          rgba(85, 107, 47, 0) 50.5%
        )
        100% 100%/37% 29%,
      radial-gradient(ellipse at 50% 100%, #222 51%, rgba(0, 0, 0, 0) 51.5%) 50%
        110%/120% 40%,
      radial-gradient(
          circle at 50% 0,
          rgba(0, 0, 0, 0.15) 40%,
          rgba(0, 0, 0, 0) 40.5%
        )
        50% 82%/20% 20%,
      linear-gradient(to right, #8b4513 4px, rgba(139, 69, 19, 0) 4px) 50% 80%/20%
        20%,
      linear-gradient(to left, #8b4513 4px, rgba(139, 69, 19, 0) 4px) 50% 80%/20%
        20%,
      linear-gradient(#ffdab9, #ffdab9) 50% 80%/20% 20%,
      linear-gradient(#48240a, #48240a) 50% 100%/65% 60%,
      radial-gradient(circle, white 30%, rgba(255, 255, 255, 0) 62%) 50% 50%/100%
        100%;
    background-color: #ccc;
    background-repeat: no-repeat;
    border-radius: 30%;
  }

  /* delete */
  .card-photo::before {
    display: block;
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 160px;
    height: 200px;
    left: 50%;
    top: -10%;
    margin-left: -80px;
    background: radial-gradient(
          circle at 50% 0,
          #ffdab9 30%,
          #8b4513 30.5%,
          #8b4513 41%,
          rgba(139, 69, 19, 0) 41.5%
        )
        50% 76%/2em 2em,
      radial-gradient(
          ellipse,
          rgba(139, 69, 19, 0) 25%,
          #5e2f0d 25.5%,
          #5e2f0d 40%,
          rgba(139, 69, 19, 0) 40.5%
        )
        50% 100%/100% 40%,
      radial-gradient(
          ellipse at 50% 0,
          #8b4513 40%,
          #ffdab9 40.5%,
          #ffdab9 58%,
          rgba(255, 218, 185, 0) 59%
        )
        50% 83%/3em 1em,
      linear-gradient(#5e2f0d, #5e2f0d) 50% 86%/1em 1em,
      radial-gradient(circle, #5e2f0d 40%, rgba(139, 69, 19, 0) 40.5%) 26% 56%/1em
        1em,
      radial-gradient(circle, #5e2f0d 40%, rgba(139, 69, 19, 0) 40.5%) 74% 56%/1em
        1em,
      radial-gradient(
          ellipse,
          rgba(139, 69, 19, 0) 52%,
          #8b4513 52.5%,
          #8b4513 55%,
          rgba(139, 69, 19, 0) 55.5%
        )
        50% 100%/150% 80%,
      radial-gradient(
          ellipse,
          rgba(0, 0, 0, 0) 46%,
          rgba(0, 0, 0, 0.15) 46.5%,
          rgba(0, 0, 0, 0.15) 53%,
          rgba(0, 0, 0, 0) 53%
        )
        50% 100%/150% 80%,
      radial-gradient(ellipse, #ffdab9 53%, rgba(255, 218, 185, 0) 53.5%) 50%
        100%/150% 80%,
      radial-gradient(
          ellipse at 50% 100%,
          rgba(139, 69, 19, 0) 35.5%,
          #8b4513 36%,
          #8b4513 38%,
          white 38.5%
        )
        50% -45%/110% 60%,
      radial-gradient(circle, #444 23%, rgba(0, 0, 0, 0) 24%) 30% 26%/1em 1em,
      radial-gradient(circle, #444 23%, rgba(0, 0, 0, 0) 24%) 40% 25%/1em 1em,
      radial-gradient(circle, #444 23%, rgba(0, 0, 0, 0) 24%) 50% 24.5%/1em 1em,
      radial-gradient(circle, #444 23%, rgba(0, 0, 0, 0) 24%) 60% 25%/1em 1em,
      radial-gradient(circle, #444 23%, rgba(0, 0, 0, 0) 24%) 70% 26%/1em 1em,
      radial-gradient(
          ellipse,
          #666 63%,
          #8b4513 63.5%,
          #8b4513 66%,
          rgba(139, 69, 19, 0) 66.5%
        )
        50% 100%/150% 80%,
      radial-gradient(ellipse, rgba(139, 69, 19, 0) 40%, #5e2f0d 40.5%) 50% 0/150%
        80%,
      linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)) 50% 50%/100%
        100%;
    background-repeat: no-repeat;
    background-color: #ffdab9;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    border: 4px solid #8b4513;
    box-shadow: inset 0 -0.2em 0 0.5em rgba(0, 0, 0, 0.15),
      inset 0 -1.6em 0 #5e2f0d;
  }

  /* delete */
  .card-photo::after {
    display: block;
    content: "";
    position: absolute;
    width: 2.5em;
    height: 0.8em;
    left: 28.5%;
    top: 26%;
    background-color: #5e0d48;
    border-radius: 0.3em;
    box-shadow: 4.2em 0 0 #5e2f0d;
  }

  .card-title {
    text-align: center;
    color: var(--font-color);
    font-size: 20px;
    font-weight: 400;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
  }

  .card-title span {
    font-size: 15px;
    color: var(--font-color-sub);
  }

  .card-socials {
    display: flex;
    height: 0;
    opacity: 0;
    margin-top: 20px;
    gap: 20px;
    transition: 0.5s;
  }

  .card-socials-btn {
    width: 25px;
    height: 25px;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .card-socials-btn svg {
    width: 100%;
    height: 100%;
    fill: var(--main-color);
  }

  .card:hover > .card-socials {
    opacity: 1;
    height: 35px;
  }

  .card-socials-btn:hover {
    transform: translateY(-5px);
    transition: all 0.15s;
  }

  .card-photo:hover {
    transition: 0.3s;
    transform: scale(0.4) translate(160px, 150px);
  }
}
</style>
